<template>
    <div :class="['nes-container',
        title != '' ? 'with-title' : '',
        titleIsCenter !== 'false' ? 'is-centered' : '',
        containerIsRounder !== 'false' ? 'is-rounded' : '',
        containerIsDark !== 'false' ? 'is-dark' : ''
    ]" :style="containerStyle">
        <p :style="titleStyle" class="title" v-if="props.title != ''">{{ title }}</p>
        <p v-if="props.content != ''">{{ content }}</p>
        <slot />

    </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
const props = defineProps({
    title: { type: String, default: '' }, // 标题
    titleIsCenter: { type: String, default: 'true' }, // 标题是否居中
    titleColor: { type: String, default: '' }, // 标题颜色 可选 white black
    titleBackgroundColor: { type: String, default: '' }, // 标题背景颜色 
    titleFontSize: { type: String, default: '' }, // 标题字体大小


    content: { type: String, default: '' }, // 内容
    contentColor: { type: String, default: '' }, // 内容颜色 可选 white black
    contentFontSize: { type: String, default: '' }, // 内容字体大小
    contentBackgroundColor: { type: String, default: '' }, // 内容背景颜色

    containerWidth: { type: String, default: '' }, // 容器宽度
    containerHeight: { type: String, default: '' }, // 容器高度
    containerIsRounder: { type: String, default: 'false' }, // 容器是否圆角
    containerIsDark: { type: String, default: 'false' }, //容器是否深色

})

const titleStyle = computed(() => {
    const style = {}
    style.color = props.titleColor
    style.backgroundColor = props.titleBackgroundColor
    style.fontSize = props.titleFontSize
    return style
})

const containerStyle = computed(() => {
    const style = {}
    style.color = props.contentColor
    style.backgroundColor = props.contentBackgroundColor
    style.fontSize = props.contentFontSize
    style.width = props.containerWidth
    style.height = props.containerHeight
    return style
})



</script>

<style scoped></style>